<template>
	<view class="body">
		<!-- tab切换 -->
		<swiper-tab-head 
		:tabBars="tabBars" 
		:tabIndex="tabIndex" 
		@tabtap="tabtap" 
		:scrollStyle="scrollStyle" 
		:scrollBlockStyle="scrollBlockStyle"
		></swiper-tab-head>
		<!-- 轮播视图 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" 
			:style="{'height':swiperheight + 'px'}"
			:current="tabIndex"
			@change="tabChange">
				<swiper-item v-for="(items, index) in users" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length > 0">
							<!-- 好友列表 -->
							<block v-for="(item, index1) in items.list" :key="index1">
								<user-list :item="item" :index="index1"></user-list>
							</block>
							<!-- 上拉加载更多 -->
							<load-more :loadtext="items.loadtext"></load-more>
						</template>
						<template v-else>
							<!-- 无内容默认 -->
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import swiperTabHead from '../../components/index/swiper-tab-head.vue';
	import userList from '../../components/user-list/user-list.vue';
	import loadMore from "../../components/common/load-more.vue";
	import noThing from "../../components/common/no-thing.vue";
	export default {
		components:{
			swiperTabHead,
			userList,
			loadMore,
			noThing
		},
		data() {
			return {
				swiperheight: 500,
				tabBars: [
					{name: '互关',id: 'huguan',num:10},
					{name: '关注',id: 'guanzhu',num:10},
					{name: '粉丝',id: 'fensi',num:10}
				],
				tabIndex: 0,
				scrollStyle: 'border-bottom:0',
				scrollBlockStyle: 'width:33%',
				users:[
					{
						loadtext: '上拉加载更多',
						list:[
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Zerofeng',
								sex: 0,
								age: 25,
								isfollow: true
							},
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Juney',
								sex: 1,
								age: 22,
								isfollow: false
							},
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Juney',
								sex: 1,
								age: 22,
								isfollow: false
							},
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Juney',
								sex: 1,
								age: 22,
								isfollow: false
							},
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Juney',
								sex: 1,
								age: 22,
								isfollow: false
							},
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Juney',
								sex: 1,
								age: 22,
								isfollow: false
							},
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Juney',
								sex: 1,
								age: 22,
								isfollow: false
							},
							{
								avatar: '../../static/images/logo.png',
								nickname: 'Juney',
								sex: 1,
								age: 22,
								isfollow: false
							}
						]
					},
					{
						loadtext: '上拉加载更多',
						list:[
							{
								avatar: '../../static/images/logo.png',
								nickname: 'hha',
								sex: 0,
								age: 25,
								isfollow: true
							},
							{
								avatar: '../../static/images/logo.png',
								nickname: 'heh',
								sex: 1,
								age: 22,
								isfollow: false
							}
						]
					},
					{
						loadtext: '上拉加载更多',
						list: []
					}
				],
			}
		},
		onLoad() {
			/* 获取屏幕的可用高度 */
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					console.log(height);
					this.swiperheight = height;
				}
			});
		},
		/* 监听导航栏按钮事件 */
		onNavigationBarButtonTap(e) {
			if(e.index === 0){
				uni.navigateBack({
					delta:1
				})
			}
		},
		methods: {
			tabtap(index){
				this.tabIndex = index
			},
			/* 导航变化 */
			tabChange(e){
				this.tabIndex = e.detail.current;
			},
			/* 上拉加载更多 */
			loadmore(index){
				if(this.users[index].loadtext !== '上拉加载更多'){
					return;
				}
				// 修改加载状态
				this.users[index].loadtext = '加载中···';
				// 获取数据
				setTimeout(() => {
					var obj = {
						
					};
					// 获取完成
					this.users[index].loadtext = '上拉加载更多';
				}, 1000)
			
				
				// this.users[index].loadtext = '没有更多数据了';
			}
		}
	}
</script>

<style>
	.body{
		padding: 0 20upx;
	}
</style>
